<template>
  <je-modal
    v-model:visible="taskListVisible"
    :title="taskListTitle"
    :button-align="'center'"
    width="1000px"
    height="600px"
    class="je-task-modal"
    :resize="false"
    :maximizable="false"
  >
    <je-grid
      border
      height="500"
      :auto-load="true"
      :size="size"
      :loading="loading"
      :data="taskList"
      :draggable="false"
      :header-cell-style="headerCellStyle"
    >
      <je-column type="seq" title="No." width="8%" align="center" :draggable="false" />
      <je-column
        field="CALENDAR_TITLE"
        title="标题"
        align="center"
        min-width="23%"
        :draggable="false"
      />
      <je-column
        field="CALENDAR_CALENDARTYPE_NAME"
        title="类型"
        align="center"
        min-width="14%"
        :draggable="false"
      />
      <je-column
        field="CALENDAR_STARTTIME"
        title="开始时间"
        align="center"
        min-width="20%"
        :draggable="false"
      />
      <je-column
        field="CALENDAR_ENDTIME"
        title="结束时间"
        align="center"
        min-width="20%"
        :draggable="false"
      />
      <je-column title="操作" align="center" min-width="10%" :draggable="false">
        <template #default="{ row }">
          <div class="edit-button" @click="editTask(row)">编辑</div>
        </template>
      </je-column>
    </je-grid>
  </je-modal>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
  import { Modal, Grid, Button } from '@jecloud/ui';
  import VueEvent from '@/helper/event';
  import {
    HOME_CALENDAR_LIST_VISIBLE,
    HOME_CALENDAR_LIST_CLOSE,
    HOME_CALENDAR_LIST_EDIT,
    HOME_CALENDAR_EDIT_VISIBLE,
    HOME_CALENDAR_OPEN_LIST,
  } from '@/helper/constant';
  export default defineComponent({
    name: 'CalendarList',
    components: {
      JeModal: Modal,
      JeGrid: Grid,
      JeColumn: Grid.Column,
    },
    setup() {
      const state = reactive({
        taskListVisible: false,
        taskListTitle: '日程列表',
        size: 'middle',
        loading: false,
        taskList: [], //任务列表
      });
      const methods = {
        headerCellStyle() {
          return {
            fontWeight: 'blob',
          };
        },
        watchDayTask(tasks) {
          state.taskList = [];
          state.taskList = tasks;
        },
        openTaskModal() {
          state.taskListVisible = true;
        },
        editTask(itemTask) {
          //编辑任务
          VueEvent.emit(HOME_CALENDAR_LIST_EDIT);
          VueEvent.emit(HOME_CALENDAR_EDIT_VISIBLE, itemTask);
        },
      };
      onMounted(() => {
        VueEvent.on(HOME_CALENDAR_LIST_VISIBLE, methods.watchDayTask);
        VueEvent.on(HOME_CALENDAR_OPEN_LIST, methods.openTaskModal);
      });
      onBeforeUnmount(() => {
        VueEvent.off(HOME_CALENDAR_LIST_VISIBLE);
        VueEvent.off(HOME_CALENDAR_OPEN_LIST);
      });
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .edit-button {
    width: 100%;
    text-align: center;
    color: #2f6bcf;
    cursor: pointer;
  }
</style>
